import React, { useEffect } from 'react';
import { connect } from 'umi';
import { Card, Row, Col, Empty } from 'antd';
import { formatMessage } from 'umi';
import styles from '@/pages/Flow/Mine/List/index.less';
import LinkTo from '@/components/LinkTo';
import { FlowIcon } from '../../../WorkFlow/components/BasicSettingForm/components';


const List = ({ mineList, dispatch }) => {
    const user = JSON.parse(localStorage.getItem('user')) || {};
    const { employeeCode, firstOrgInfo } = user
    const { firstCompanyCode } = firstOrgInfo;
    const { tempList } = mineList;
    useEffect(() => {
        const params = { employeeCode, companyCode: firstCompanyCode, category: '1' };
        dispatch({
            type: 'mineList/fetchTemplatelist',
            payload: params
        });
    }, [dispatch]);
    // TODO 这里因为属于考勤部分，只显示考勤流程的内容
    return (
        <div className={styles.list}>
            {tempList && tempList.length > 0 ? (
                <Card
                    title={formatMessage({
                        id: 'stat.title.kqcylc'
                    })}
                    key={tempList.category}
                    bordered={false}
                >
                    <Row type="flex" align="middle">
                        {tempList[0].workflowDefProcessDTOList.map(subItem => (
                            <LinkTo
                                to="/personal/portal/apply"
                                query={{
                                    id: subItem.actProcessDefinitionId,
                                    name: subItem.processName,
                                    userCode: user.userCode
                                }}
                                alt={subItem.processName}
                            >
                                <Col title={subItem.processName} key={subItem.templateId}>
                                    <FlowIcon value={subItem.iconType} />
                                    <span className={styles.newTemplateName}>{subItem.processName}</span>
                                </Col>
                            </LinkTo>
                        ))}
                    </Row>
                </Card>
            ) : (
                <Card>
                    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                </Card>
            )}
        </div>
    );
};

export default connect(({ mineList }) => ({ mineList }))(List);
